<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<block v-for="(hotImg, imgIndex) in hotImgs" :key="imgIndex">
				<swiper-item>
					<image class="swiper-img" :src="hotImg.image"></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- 导航菜单 -->
		<uni-grid show-border="false" @click="menuClick" :data="swipers"></uni-grid>
		<!-- 热门新闻 -->
		<view class="section-title is-h3">操作指南</view>
		<view class="list" v-for="(newsItem, newsIndex) in hotnews" :key="newsIndex">
			<news-text-only :showImg="true" :data="newsItem" @close="dislike(tabIndex, newsIndex)" @click="goDetail(newsItem)"></news-text-only>
		</view>

		<view class="uni-tab-bar-loading">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>

</template>

<script>
	import newsTextOnly from '@/components/dogner-list-item/news-text-only.vue';
	import uniCard from "@/components/uni-card/uni-card.vue";
	import uniGrid from "@/components/uni-grid/uni-grid.vue";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

	import api from "@/api/index.js"
	import apiConfig from "@/api/config.js"
	import {
		friendlyDate
	} from '@/utils/util.js';
	export default {
		components: {
			uniGrid,
			newsTextOnly,
			uniLoadMore,
			uniCard
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				hotImgs: [{
					image: 'http://210.44.71.43:58080/userfiles/1/images/cms/article/2019/02/kv-home-v3.png',
					text: ''
				}, {
					image: 'http://210.44.71.43:58080/userfiles/1/images/cms/article/2019/02/banner222.png',
					text: ''
				}, {
					image: 'http://210.44.71.43:58080/userfiles/1/images/cms/article/2019/02/kv-home-v3.png',
					text: ''
				}],
				swipers: [{
						image: '/static/car_2.png',
						text: '物流管理'
					},
					{
						image: '/static/car_1.png',
						text: '车辆管理'
					},
					{
						image: '/static/money.png',
						text: '我的补贴'
					},
					{
						image: '/static/car.png',
						text: '行业资讯'
					},
					{
						image: '/static/msg.png',
						text: '通知公告'
					},
					{
						image: '/static/service.png',
						text: '联系客服'
					}
				],
				hotnews: [],
				page: {
					pageNo: 0
				},
				loadMoreStatus: "more",
			}
		},
		methods: {
			menuClick: function(e) {
				let dest = {};
				switch (e.index) {
					case 0:
						dest.url = "/pages/transport/list/list"
						break;
					case 1:
						dest.url = "/pages/cars/list/list"
						break;
					case 2:
						// dest.url = "/pages/transport/list/list"	
						break;
					case 3:
						dest.url = "/pages/news/news/list/list"
						break;
					case 4:
						dest.url = "/pages/news/message/list/list"
						break;
					case 5:
						uni.makePhoneCall({
							phoneNumber: '18668985699' //仅为示例
						});
						break;
				}

				if (dest.url) {
					uni.navigateTo(dest)
				}
			},
			goDetail(detail) {
				uni.navigateTo({
					url: '/pages/news/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
				});
			},
			getNews: function() {
				api.cmsService.getNews(++this.page.pageNo).then(res => {
					//data为一个数组，数组第一项为错误信息，第二项为返回数据
					this.page = res.data;
					console.log(JSON.stringify(this.page));
					console.log(this.page.last)
					if(this.page.pageNo==this.page.first){
						//最后一页
						this.loadMoreStatus = "noMore"
					}else{
						this.loadMoreStatus = "more"
					}
					if (Array.isArray(res.data.list)) {
						res.data.list.forEach((resItem) => {
							let item = {
								id: resItem.id,
								post_id: resItem.id,
								title: resItem.title,
								author_name: resItem.user.name,
								image_url: apiConfig.CMS_BASE_URL + resItem.imageSrc,
								published_at: resItem.createDate,
								comments_count: resItem.hits,
								content: "",
								category: resItem.category
							}
							this.hotnews.push(item)
						});
					}
				});
			},
			init: function() {
				this.hotnews = [];
				this.page.pageNo = 0;
				// 初始化列表信息
				this.getNews();
			}
		},
		onPullDownRefresh() {
			this.init();
			uni.stopPullDownRefresh()
		},
		onLoad: function() {
			this.init()
		},
		onReachBottom: function() {
			if(this.loadMoreStatus="more"){
				this.loadMoreStatus="loading";
				this.getNews();
				console.log("loadmore")
			}
		},
	};
</script>

<style>
	.swiper-img {
		width: 100%;
	}

	.section-title {
		text-align: center;
		width: 100%;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}
</style>
